<template>
	<sc-drawer
		title="添加学员"
		size="700px"
    v-model="visible"
		@cancel="$emit('close')"
		@confirm="confirm"
	>
		<StudentInfoForm
      ref="studentInfoFormRef"
      @click.stop
      v-model:studentInfo="studentInfo"
    />
	</sc-drawer>
</template>

<script setup>
import { ref, getCurrentInstance, defineEmits, nextTick } from "vue";
import { ElMessage } from 'element-plus';
import StudentInfoForm from "@/views/student/components/student-Info-form/index.vue";

const emits = defineEmits(['success']);
const { proxy } = getCurrentInstance();
const studentInfoFormRef = ref(null);
const visible = ref(true);

const studentInfo = ref({});
function confirm() {
  studentInfoFormRef.value.validate({
    success() {
      const loading = proxy.$loading();
      const paramsObj = {...studentInfoFormRef.value.paramsData, ...studentInfo.value}
      // const submitObj = {
      //   student: studentInfo.value
      // }
      const submitObj = {
        student: paramsObj
      }
      proxy.$API.student.add.post(submitObj).then(res => {
        if (res.code === 200) {
          ElMessage({
            message: '添加成功',
            type: 'success'
          })
          // 关闭抽屉
          visible.value = false;
          emits('success')
        } else {
          ElMessage({
            message: res.message,
            type: 'error',
          })
        }
      }).finally(() => loading.close())
    },
    error() {
      ElMessage({
        message: '必填项不能为空',
        type: 'error',
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.mr10 {
	margin-right: 10px;
}
</style>
